<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物寄养 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/service-page.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link active">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <section class="service-hero boarding">
            <div class="container">
                <h1>宠物寄养</h1>
                <p>安全、舒适、专业的寄养环境，让您放心出行，给爱宠一个临时的家。</p>
            </div>
        </section>

        <div class="container service-layout">
            <div class="service-details">
                <h2><i class="fas fa-home"></i> 服务内容</h2>
                <p>我们提供家庭式寄养服务，拒绝笼养，保证每只宠物都有足够的活动空间和玩伴。</p>
                <div class="feature-list">
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>24小时专人看护</h4><p>服务人员全程陪伴，确保宠物安全。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>科学喂养</h4><p>可自带宠物粮，我们也会提供高品质宠物粮。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>每日互动与运动</h4><p>每天定时遛弯、玩耍，保证运动量。</p></div></div>
                    <div class="feature-item"><i class="fas fa-check-circle"></i><div><h4>实时视频反馈</h4><p>您可以通过手机App随时查看爱宠的动态。</p></div></div>
                </div>

                <h2><i class="fas fa-tags"></i> 价格套餐</h2>
                <div class="pricing-table">
                    <div class="pricing-option"><h4>舒适单间</h4><p>狗狗</p><div class="price">¥88/天</div></div>
                    <div class="pricing-option active"><h4>豪华套间</h4><p>狗狗</p><div class="price">¥128/天</div></div>
                    <div class="pricing-option"><h4>猫咪乐园</h4><p>猫咪专用</p><div class="price">¥98/天</div></div>
                </div>
            </div>

            <div class="booking-form-container">
                <div class="booking-form">
                    <h2>立即预约</h2>
                    <form id="bookingForm" onsubmit="submitBooking(event)">
                        <div class="form-group">
                            <label>选择宠物</label>
                            <select name="petId" required>
                                <option value="">请选择您的爱宠</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>入住日期</label>
                            <input type="date" name="checkinDate" required>
                        </div>
                        <div class="form-group">
                            <label>离店日期</label>
                            <input type="date" name="checkoutDate" required>
                        </div>
                        <div class="form-group">
                            <label>服务地址</label>
                            <select name="address" required>
                                <option value="">请选择服务地址</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>备注信息</label>
                            <textarea name="notes" rows="2" placeholder="如过敏史、性格特点等"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-large">确认预约</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <a href="services.html" class="back-to-services">
        <i class="fas fa-arrow-left"></i>
    </a>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 加载宠物列表
        petHouseAPI.pets.getAll().then(res => {
            const pets = res.data || [];
            const petSelect = document.querySelector('select[name="petId"]');
            petSelect.innerHTML = '<option value="">请选择您的爱宠</option>' +
                pets.map(p => `<option value="${p.id}">${p.name} (${p.type})</option>`).join('');
        });
        // 2. 加载地址列表
        if (petHouseAPI.address && petHouseAPI.address.getAll) {
            petHouseAPI.address.getAll().then(res => {
                const addresses = res.data || [];
                const addrSelect = document.querySelector('select[name="address"]');
                addrSelect.innerHTML = '<option value="">请选择服务地址</option>' +
                    addresses.map(a => `<option value="${a.id}">${a.province}${a.city}${a.district}${a.detailAddress}</option>`).join('');
            });
        }
        // 3. 价格套餐可选
        const pricingOptions = document.querySelectorAll('.pricing-option');
        pricingOptions.forEach(option => {
            option.addEventListener('click', function() {
                pricingOptions.forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
            });
        });
    });
    // 3. 表单提交
    async function submitBooking(e) {
        e.preventDefault();
        const form = document.getElementById('bookingForm');
        const petId = form.petId.value;
        const addressId = form.address.value;
        const checkinDate = form.checkinDate.value;
        const checkoutDate = form.checkoutDate.value;
        const remark = form.notes.value;
        // 获取选中的套餐
        const selectedPackage = document.querySelector('.pricing-option.active h4')?.textContent || '';
        // 这里假设寄养服务ID为2，如需动态获取可优化
        const serviceId = 2;
        // 拼接服务时间为入住日期+"~"+离店日期
        const serviceTimeStr = checkinDate + ' ~ ' + checkoutDate;
        try {
            await petHouseAPI.orders.create({
                petId,
                serviceId,
                address: addressId,
                serviceTime: serviceTimeStr,
                remark,
                package: selectedPackage
            });
            alert('预约成功！');
            window.location.href = 'orders.html';
        } catch (err) {
            alert('预约失败，请重试');
        }
    }
    </script>
</body>
</html> 